<template>
    <el-row>
        <el-col :span="20">
            <el-radio-group v-model="type" size="large">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>
        </el-col>
        <el-col :span="4">
            <el-select v-model="day">
                <el-option v-for="item in options" :key="day" :label="item.label" :value="item.day">{{ item.label
                }}</el-option>
            </el-select>
        </el-col>
    </el-row>
    <div ref="pieRef" class="pie">

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs, watch } from 'vue'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
const pieRef = ref<HTMLDivElement | null>(null);

const options = [{ day: 'yesterday', label: '昨天' }, { day: 'today', label: '今天' }, { day: 'three_days', label: '前三天' }, { day: 'seven_days', label: '前一周' },]

const day = ref('yesterday')
const type = ref('_money')


interface Iprop {
    data: SalePie[];
    [index: string]: any;
}

// 定义props接收父传子的数据
const props = defineProps<Iprop>()
let pie: echarts.ECharts;
onMounted(() => {
    if (!pieRef.value) return;
    pie = echarts.init(pieRef.value)
})
const { data } = toRefs(props)
watch(data, () => {
    // 把data进行处理，要求满足 echarts 的 series 的data
    // 该data要求： {name,value}
    let d = data.value as any as SalePie[];
    let newData = d.map(item => ({
        name: item.name,
        value: parseInt(item.sale_fourteen_days)
    }))
    let option: EChartsOption = {
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,.3)',
            textStyle: {
                color: '#fff'
            },
            formatter: '{b} {c}({d}%)'
        },
        legend: {
            top: '15%',
            left: 'right',
            height: 200,
            orient: 'vertical'
        },
        // title: {
        //     text: '这是一个标题',
        //     left: 'center'
        // },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    // label: {
                    //     show: true,
                    //     fontSize: 40,
                    //     fontWeight: 'bold'
                    // }
                },
                labelLine: {
                    show: true
                },
                data: newData
            }
        ]
    };
    pie.setOption(option);
})

// 监听type 和day
watch([type, day], () => {
    // 重新组织数据，重新渲染饼图
    // console.log(type.value, day.value)
    let key = day.value;
    if (type.value === 'sale_') {
        key = type.value + key;
    } else {
        key = key + type.value
    }
    // 再根据key，取出 数组里面的数据，作为 饼图的 data 的 value
    let newData = data.value.map((item: any) => ({
        name: item.name,
        value: item[key]
    }))
    let option: EChartsOption = {
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,.3)',
            textStyle: {
                color: '#fff'
            },
            formatter: '{b} {c}({d}%)'
        },
        legend: {
            top: '15%',
            left: 'right',
            height: 200,
            orient: 'vertical'
        },
        // title: {
        //     text: '这是一个标题',
        //     left: 'center'
        // },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    // label: {
                    //     show: true,
                    //     fontSize: 40,
                    //     fontWeight: 'bold'
                    // }
                },
                labelLine: {
                    show: true
                },
                data: newData
            }
        ]
    };
    pie.setOption(option);
})

</script>

<style lang="less" scoped>
.pie {
    width: 100%;
    height: 400px;
}
</style>